@include('Home.head')

<body>
<style>
    .am-header-title a{
        color: #ffffff;
    }
    .am-navbar-nav a .am-navbar-label{
        font-size: 14px;
        margin-top: 6px;
    }
    .am-navbar{
        height: 60px;
    }
</style>
<div class="container" id="app">

    <div class="my-nav-bar">
        <ol class="am-breadcrumb">
            <li><a href="#">首页</a></li>
            <li><a href="#">升级为实体门店</a></li>
        </ol>
    </div>

    <div class="cart-panel">
        {{--<div class="withdrawals-panel">--}}
            {{--<form class="am-form">--}}
                {{--<div class="am-radio up-radio-item">--}}
                    {{--<label>--}}
                        {{--<input type="radio" name="doc-radio-1" value="option1" checked>--}}
                        {{--我是工厂直供商家--}}
                    {{--</label>--}}
                {{--</div>--}}
                {{--<div class="am-radio up-radio-item up-radio-item2">--}}
                    {{--<label>--}}
                        {{--<input type="radio" name="doc-radio-1" value="option1">--}}
                        {{--实体店商家--}}
                    {{--</label>--}}
                {{--</div>--}}
                {{--<div class="am-radio up-radio-item up-radio-item3">--}}
                    {{--<label>--}}
                        {{--<input type="radio" name="doc-radio-1" value="option1">--}}
                        {{--我是个人微店--}}
                    {{--</label>--}}
                {{--</div>--}}
            {{--</form>--}}
        {{--</div>--}}
        <div class="withdrawals-panel"><span class=" red2">*</span>升级为：<span class="red2">实体门店</span></div>
        <div class="withdrawals-panel"><span class=" red2">*</span>所需产品：<span class="red2">联系客服</span></div>
        <div class="am-form-group am-form-icon">
            <i class="am-icon-home" style="color:#329cd9"></i>
            <input type="text" class="am-form-field  my-radius" v-model="merchants.shop_name" placeholder="请输入门店名称">
        </div>
        <div class="am-form-group am-form-icon">
            <i class="am-icon-user" style="color:#329cd9"></i>
            <input type="text" class="am-form-field  my-radius" v-model="merchants.name" placeholder="联系人名称">
        </div>
        <div class="am-form-group am-form-icon">
            <i class="am-icon-phone" style="color:#f09513"></i>
            <input type="number" pattern="[0-9]*"  class="am-form-field  my-radius" v-model="merchants.phone" placeholder="请输入门店联系电话">
        </div>
        <form class="am-form am-form-inline">
            <div data-toggle="distpicker">
                <label class="sr-only" for="province1">Province</label>
                <select id="province1" v-model="merchants.province" required>
                </select>
                <div class="form-group">
                    <label for="city1">City</label>
                    <select class="form-control" id="city1" v-model="merchants.city" required>
                    </select>
                </div>
                <div class="form-group">
                    <label class="sr-only" for="district1" >District</label>
                    <select class="form-control" id="district1" v-model="merchants.district">
                    </select>
                </div>
            </div>
        </form>
        <p>&nbsp;</p>
        <span class=" red2">*</span>地址：<span class="red2">请输入详细地址</span>
        <div class="am-form-group am-form-icon">
            <i class="am-icon-map-marker" style="color:#e88888"></i>
            <input type="text" id="text_" class="am-form-field  my-radius" v-model="merchants.address" placeholder="输入详细地址">
        </div>
         <div class="am-form-group am-form-icon">
           <button type="button" class="am-btn am-btn-default" onclick="geoCode();">点击获取经纬度</button>
       </div> 
        <div class="am-form-group am-form-icon">
            <i class="am-icon-map-marker" style="color:#e88888"></i>
            <input type="text" id="result_"  class="am-form-field  my-radius" v-model="merchants.latitude" disabled placeholder="经纬度">
        </div>
     <!-- <div class="am-form-group am-form-icon">
          <div id="containers" style=" width: 100%;height: 200px;" ></div>
      </div>  -->
        <p class="am-text-center">
            <button type="submit" class="am-btn am-btn-danger am-radius" v-on:click="add()" style="border-radius: 50px;">立即升级</button>
        </p>
    </div>

    <!--底部-->
    @include('Home.foot')
</div>
</body>
<!-- <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=uRhBKfzW36pGW8KGkyAhpwXDYwmjNcZP"></script> --> 
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=Y3JBZ-XWBKP-6GLDC-LDO4W-BH4WV-WMFI3"></script>
<script src="{{ URL::asset('js/address/distpicker.data.js') }}"></script>
<script src="{{ URL::asset('js/address/distpicker.js') }}"></script>
<script src="{{ URL::asset('js/address/main.js') }}"></script>
<!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=517de42e76bd0e5b45dc2c0b2a12c50f&plugin=AMap.Geocoder"></script> -->
<!-- <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.13&key=517de42e76bd0e5b45dc2c0b2a12c50f"></script> -->
<script type="text/javascript">
    function geoCode(){
        var callbacks={
        complete:function(results){
            app.merchants.latitude = results.detail.location.lng +','+results.detail.location.lat;
            },
        }
        var province1 = $("#province1").val();
        var city1 = $("#city1").val();
        var district1 = $("#district1").val();
        var text_ = $("#text_").val();
        if(text_ == ''){
            layer.msg('详细地址不能为空!');
            return false;
        }
        var adr = province1+city1+district1+text_;
        geocoder = new qq.maps.Geocoder(callbacks);
        geocoder.getLocation(adr);
    }



</script>
<script>


    var app = new Vue({
        el: "#app",
        data: {
            title:'升级商家',
            merchants:{
                shop_name:'',
                name:'',
                phone:'',
                province:'',
                city:'',
                district:'',
                address:'',
                latitude:'',
            },
        },
        methods: {
            add:function () {   
                if(app.merchants.shop_name == '') {
                    layer.msg('门店名称不能为空');return;
                }
                if(app.merchants.name == '') {
                    layer.msg('申请人不能为空');return;
                }
                if(app.merchants.phone == '') {
                    layer.msg('联系电话不能为空');return;
                }
                if(!(/^[1][3,4,5,7,8,9][0-9]{9}$/.test(app.merchants.phone))){
                    layer.msg('请输入正确的手机');return;
                }
                if(app.merchants.province == '') {
                    layer.msg('省不能为空');return;
                }
                if(app.merchants.city == '') {
                    layer.msg('市不能为空');return;
                }
                if(app.merchants.district == '') {
                    layer.msg('区不能为空');return;
                }
                if(app.merchants.address == '') {
                    layer.msg('详细地址不能为空');return;
                }
                if(app.merchants.latitude == '') {
                    layer.msg('经纬度不能为空');return;
                }
                $.post("/home/stores/stores",{'_token':'{{csrf_token()}}',class:'stores_is_far',latitude:app.merchants.latitude },function (res) {
                    if (res.code) {
                        layer.msg('该地址3公里内已有门店存在！');
                        return false;
                    } else {
                        $.post("/home/stores/stores",{'_token':'{{csrf_token()}}',class:'add',stores:app.merchants},function (res) {
                            if (res.code) {
                                layer.msg(res.data,{time:500},function () {
                                    location.href = "/home/stores/index";
                                });
                            } else {
                                layer.msg(res.data);
                            }
                        });
                    } 
                });    
            }
        },
        //自动执行
        mounted: function () {
            //this.initialize();
        },
    });
</script>
</html>
